<template>
  <div class="book-section">
    <h3 class="section-title">-- 书册类 --</h3>
    <van-row gutter="10">
      <van-col span="12" v-for="item in bookList" :key="item.id">
        <div class="book-card" @click="goToOrder(item.id)">
          <img :src="item.pic_url" class="book-img" />
          <div class="book-title">{{ item.name }}</div>
          <div class="book-subtitle">{{ item.subTitle }}</div>
        </div>
      </van-col>
    </van-row>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'  // ✅ 引入 router

const router = useRouter()             // ✅ 获取路由实例

const bookList = [
  {
    id: 1,
    name: '骑马钉书',
    subTitle: '数码骑马钉画册',
    pic_url: '/images/homebook/book1.jpg'
  },
  {
    id: 2,
    name: '无线胶装书',
    subTitle: '数码无线胶装画册',
    pic_url: '/images/homebook/book2.png'
  },
  {
    id: 3,
    name: '锁线胶装书',
    subTitle: '锁线胶装画册',
    pic_url: '/images/homebook/book3.jpg'
  },
  {
    id: 4,
    name: '锁线精装书',
    subTitle: '锁线精装画册',
    pic_url: '/images/homebook/book4.png'
  }
]

const goToOrder = (id) => {
  router.push(`/order/${id}`) // ✅ 正确跳转
}
</script>

<style scoped lang="scss">
.book-section {
  padding: 16px;

  .section-title {
    text-align: center;
    font-weight: bold;
    font-size: 18px;
    margin-bottom: 12px;
  }

  .book-card {
    background: #fff;
    padding: 8px;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    margin-bottom: 12px;
  }

  .book-img {
    width: 100%;
    height: 120px;
    object-fit: cover;
    border-radius: 4px;
  }

  .book-title {
    font-size: 16px;
    margin-top: 8px;
    font-weight: 500;
  }

  .book-subtitle {
    font-size: 12px;
    color: #999;
  }
}
</style>
